<template>
  <div class="login-page">
    <!-- 背景装饰元素 -->
    <div class="bg-decoration orange"></div>
    <div class="bg-decoration blue large"></div>
    <div class="bg-decoration blue small"></div>
    
    <!-- 半透明遮罩 -->
    <div class="overlay"></div>
    
    <!-- 登录框 -->
    <div class="login-box">
      <!-- 系统Logo和名称 -->
      <div class="logo-section"> 
        <div class="logo-info">
          <div class="sys-name">DanaOj后台管理</div>
          <div class="sys-sub-name">就是狠刷</div>
        </div>
      </div>
      
      <!-- 登录表单 -->
      <div class="form-section">
        <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-position="left">
          <!-- 用户名输入 -->
          <el-form-item prop="username">
            <div class="form-input-wrapper">
              <img src="@/assets/images/shouji.png" alt="账号图标">
              <el-input 
                v-model="userAccount" 
                placeholder="请输入账号" 
                clearable
              ></el-input>
            </div>
          </el-form-item>
          
          <!-- 密码输入 -->
          <el-form-item prop="password">
            <div class="form-input-wrapper">
              <img src="@/assets/images/yanzhengma.png" alt="密码图标">
              <el-input 
                v-model="password" 
                placeholder="请输入密码" 
                type="password" 
                show-password
              ></el-input>
            </div>
          </el-form-item>
          
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button 
              :loading="loading"
              type="primary" 
              class="login-button" 
              @click="loginFun"
              :disabled="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
    import { ref } from "vue"
    import { loginService } from "../apis/suser"
    import { setToken } from "@/utils/cookie"
    import router from "@/router"

    const userAccount=ref('')
    const password=ref('')

    async function loginFun() {
      try{
           const loginResult = await loginService(userAccount.value,password.value)
           console.log("loginResult:",loginResult)
           router.push("/oj/system")
           setToken(loginResult.data)
      }catch(error){
          console.log("error:",error)
      }
        
        // if(loginResult.data.code===1000){ //TODO 1
        //     //登录成功
        //     console.log("登录成功")
        //    
        //     console.log("跳转页面并生成cokoie")
        //     setToken(loginResult.data.data)
        // }else{
        //     //登录失败
        //     console.log("登录失败")
        //     ElMessage.error(loginResult.data.msg)
        // }
    }
   
    // setTimeout(() => {
    // }, 5000)
</script>

<style lang="scss" scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  
  // 背景装饰元素
  .bg-decoration {
    border-radius: 50%;
    position: absolute;
    opacity: 0.67;
    filter: blur(50px);
  }
  
  .orange {
    background: #F0714A;
    width: 498px;
    height: 498px;
    left: 14.2%;
    top: 41%;
  }
  
  .blue {
    background: #32C5FF;
    
    &.large {
      width: 334px;
      height: 334px;
      top: 16.3%;
      left: 80.7%;
    }
    
    &.small {
      width: 186px;
      height: 186px;
      top: 8.2%;
      left: 58.2%;
    }
  }
  
  // 半透明遮罩
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
  }
  
  // 登录框
  .login-box {
    width: 456px;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 50px 72px;
    box-sizing: border-box;
    
    // 系统名称区域
    .logo-section {
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      
      .sys-name {
        height: 33px;
        font-family: 'PingFang SC', sans-serif;
        font-weight: 600;
        font-size: 24px;
        color: #222222;
        line-height: 33px;
        margin-bottom: 10px;
      }
      
      .sys-sub-name {
        height: 22px;
        font-family: 'PingFang SC', sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 22px;
      }
    }
    
    // 表单区域
    .form-section {
      // 表单输入框包装器
      .form-input-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        background: #F8F8F8;
        border-radius: 8px;
        margin-bottom: 24px;
        position: relative;
        
        img {
          width: 24px;
          height: 24px;
          margin: 0 18px;
          object-fit: contain;
        }
        
        // 自定义Element UI输入框样式
        .el-input {
          width: calc(100% - 60px);
          font-family: 'PingFang SC', sans-serif;
          font-weight: 400;
          font-size: 16px;
          color: #222222;
          
          .el-input__wrapper {
            border: none;
            box-shadow: none;
            background: transparent;
            padding: 0;
          }
        }
      }
      
      // 登录按钮
      .login-button {
        width: 100%;
        height: 48px;
        background: #32C5FF;
        border-radius: 8px;
        font-family: 'PingFang SC', sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        
        &:hover {
          background: #10b5f2;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(49, 197, 255, 0.25);
        }
        
        &:active {
          transform: translateY(0);
          box-shadow: 0 2px 6px rgba(49, 197, 255, 0.3);
        }
      }
    }
  }
  
  // 适配小屏幕
  @media (max-width: 576px) {
    .login-box {
      width: 90%;
      padding: 40px 30px;
    }
  }
}
</style>    